<?php require  './start.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkout</title>
</head>
<body>
<form id="payment-form" action="payment.php" method="post">
    <div id="dropin-container"></div>
    <input type="submit" value="Purchase"></input>
    <input type="hidden" id="nonce" name="payment_method_nonce"></input>
</form>

<script src="https://js.braintreegateway.com/web/dropin/1.11.0/js/dropin.min.js"></script>

<script>
    var form = document.querySelector('#payment-form');
    var nonceInput = document.querySelector('#nonce');

    braintree.dropin.create({
        authorization: '<?=$clienToken?>',
        container: '#dropin-container',
        // paypal: {
        //     flow: 'vault'
        // },
        // card : {}
    }, function (err, dropinInstance) {
        if (err) {
            // Handle any errors that might've occurred when creating Drop-in
            console.error(err);
            return;
        }
        form.addEventListener('submit', function (event) {
            event.preventDefault();

            dropinInstance.requestPaymentMethod(function (err, payload) {
                if (err) {
                    // Handle errors in requesting payment method
                    console.log( err );
                    return;
                }
                console.log( payload );
                // Send payload.nonce to your server
                nonceInput.value = JSON.stringify(payload);
                form.submit();
            });
        });
    }).then(function (clientInstance) {
        // Create a PayPal Checkout component.
        return braintree.paypalCheckout.create({
            client: clientInstance
        });
    });
</script>
</body>
</html>